<template>
  <div class="ask-question">
    <div class="w-container">
      <div class="ask-question-wrapper">
        <div class="main">
            <div class="ask-message">
                  <img src="../assets/images/avatar.jpg" alt="">
                  <textarea class="question-title" @blur="checkTitle" @focus="inputing" placeholder="写下你的问题，准确地描述问题更容易得到解答" v-model="questionTitle"/></textarea>
            </div>
            <Icon type="md-close" class="close" size="24" @click="close"/>
            <ask-editor class="ask-editor" ref="askEditor"/>
        </div>
        <button class="submit" @click="submit">发布提问</button>
        <span class="message" v-if="showMessage">{{message}}</span>
    </div>
    </div>
 
  </div>
</template>
<script>
import AskEditor from "@/components/question/Editor/AskEditor";
export default {
  name: "AskQuestion",
  data() {
    return {
      questionTitle: "",
      showMessage: false
    };
  },
  components: {
    AskEditor,
  },
  methods: {
    //关闭提问框
    close() {
      this.$store.commit("changeWriteQuestion", false);
    },
    //提交问题
    submit() {
      //检查问题是否符合要求
      if(this.message ==='') {
        this.$refs.askEditor.post(this.questionTitle)
      }
    },
    //失去焦点时检查标题
    checkTitle() {
      this.showMessage = true
    },
    //获取焦点
    inputing() {
      this.showMessage = false
    }
  },
  computed: {
    message() {
      if(this.questionTitle.length<4) return '最少4个字'
      else if(this.questionTitle.indexOf('？') === -1 && this.questionTitle.indexOf('?') === -1) {
        return '你还没有给问题添加问号'
      }
      else return ''
    }
  },
 
};
</script>

<style scoped lang="scss">
.ask-question {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  background-color: rgba(18, 18, 18, 0.65);
  z-index: 1000;
  .w-container {
    width: auto;
    height: auto;
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.4rem;

    .ask-question-wrapper {
      position: relative;
      width: 53.6rem;
      min-height: 30rem;
      max-height: 90rem;
      padding:2.4rem;

      .main {
        min-height: 13.8rem;
        position: relative;

        .ask-message {
          display: flex;
          align-items: center;
          height: 5rem;
          width: 100%;
          img {
            height: 100%;
          }
          .question-title {
            font-size: 1.8rem;
            width: 93%;
            height: 100%;
            overflow: auto;
            resize: none;
            border: none;
            outline: none;
          }
        }
        .close {
          position: absolute;
          cursor: pointer;
          right: -7rem;
          top: 0;
          color: #fff;
          z-index: 999;
        }
        .ask-editor {
          max-height: 75rem;
          margin-top: 2rem;
            overflow: auto;
        }
      }
      .submit {
    
        background-color: #0084ff;
        color: #fff;
        padding: 1rem 1.6rem;
        border-radius: 0.2rem;
        font-size: 1.4rem;
        margin-left: 40rem;
  
      }
      .message {
        position: absolute;
        right: 0.5rem;
        top: 6.5rem;
        color: #f1403c;
      }
   
    }
  }
}
</style>
<style >
.ql-container {
  min-height: 11rem;
}
</style>
